import { Carousel } from "@ark-ui/solid/carousel";
import { For } from "solid-js";

export default function HeroCarousel() {
  const slides = [
    {
      title: "Discover Amazing Places",
      subtitle: "Explore the world's most beautiful destinations",
      image: "https://picsum.photos/seed/hero1/1200/600",
      cta: "Start Exploring",
    },
    {
      title: "Adventure Awaits",
      subtitle: "Create memories that will last a lifetime",
      image: "https://picsum.photos/seed/hero2/1200/600",
      cta: "Book Now",
    },
    {
      title: "Journey Beyond",
      subtitle: "Experience luxury travel like never before",
      image: "https://picsum.photos/seed/hero3/1200/600",
      cta: "Learn More",
    },
  ];

  return (
    <Carousel.Root
      defaultPage={0}
      slideCount={slides.length}
      autoplay
      class="w-full"
    >
      <div class="relative">
        <Carousel.ItemGroup class="overflow-hidden rounded-xl">
          <For each={slides}>
            {(slide, index) => (
              <Carousel.Item index={index()}>
                <div class="relative h-96 lg:h-[500px]">
                  <img
                    src={slide.image}
                    alt={slide.title}
                    class="w-full h-full object-cover"
                  />
                  <div class="absolute inset-0 bg-black bg-opacity-40" />
                  <div class="absolute inset-0 flex items-center justify-center text-center text-white">
                    <div class="max-w-2xl px-6">
                      <h1 class="text-4xl lg:text-6xl font-bold mb-4">
                        {slide.title}
                      </h1>
                      <p class="text-xl lg:text-2xl mb-8 text-gray-200">
                        {slide.subtitle}
                      </p>
                      <button class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-semibold transition-colors">
                        {slide.cta}
                      </button>
                    </div>
                  </div>
                </div>
              </Carousel.Item>
            )}
          </For>
        </Carousel.ItemGroup>

        <Carousel.Control class="absolute inset-x-4 top-1/2 -translate-y-1/2 flex justify-between pointer-events-none">
          <Carousel.PrevTrigger class="p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full transition-all pointer-events-auto text-white backdrop-blur-xs">
            ←
          </Carousel.PrevTrigger>
          <Carousel.NextTrigger class="p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-full transition-all pointer-events-auto text-white backdrop-blur-xs">
            →
          </Carousel.NextTrigger>
        </Carousel.Control>
      </div>

      <Carousel.IndicatorGroup class="flex justify-center items-center mt-6 gap-3">
        <For each={slides}>
          {(_, index) => (
            <Carousel.Indicator
              index={index()}
              class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600 data-current:bg-blue-500 dark:data-current:bg-blue-400 data-current:w-8 transition-all cursor-pointer"
            />
          )}
        </For>
      </Carousel.IndicatorGroup>
    </Carousel.Root>
  );
}
